<template>
   <div class="breadcrumb-style">
       <el-breadcrumb separator="/">
       <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
       <el-breadcrumb-item>角色列表</el-breadcrumb-item>
       </el-breadcrumb>
    </div>
  <div class="search">
    <div class="title search_top">
      <div class="ei">
        <el-icon><Search /></el-icon>
        <h3>筛选搜索</h3>
      </div>
      <div>
        <el-button type="primary" @click="onSearch">查询搜索</el-button>
      </div>
    </div>
    <div class="search_input">
      <p>角色名称:</p>
      <el-input type="text" placeholder="请输入用户名" v-model="name"></el-input>
    </div>
  </div>
  <div class="adddata">
    <div class="title">
      <el-icon><Tickets /></el-icon>
      <h3>数据列表</h3>
    </div>
    <div>
      <el-button type="primary" @click="onAddUser('add')">添加</el-button>
    </div>

  </div>
  <div class="tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="id" label="编号" width="100" />
      <el-table-column align="center" prop="name" label="角色名称" width="169" />
      <el-table-column align="center" prop="description" label="描述" width="200" />
      <el-table-column align="center" prop="adminCount" label="用户数" width="168" />
      <el-table-column align="center" label="添加时间" width="250">
        <!-- slot 插槽写法 -->
        <template #default="scope">
          <div>
            {{
              scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否启用" width="167">
        <template #default="scope">
          <div>
            <el-switch :value="scope.row.status === 1 ? true : false" @click="onSwitch(scope.row.id,scope.row.status)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="174">
        <template  #default="scope">
          <div class="changes">
          <span class="users" @click="onMenu(scope.row.id)">分配菜单</span>
          <span class="users" @click="onResource">分配资源</span>
          <span class="users" @click="onEdit">编辑</span>
        </div>
        </template>
        
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Rolebianji :visiable="visiable" @bianji2="bianji2"   @confirm="onConfirmDialog"></Rolebianji>
  </div>
  <!-- 编辑组件 -->
</template>

<script setup lang="ts">
import { ref,defineEmits } from "vue";
import{ useRoute,useRouter } from 'vue-router'
import {Ref} from "vue";
import * as api from "@/request/api";
import roleTable from "@/hooks/roleTables";
import { ElMessage,ElMessageBox } from 'element-plus';
import *as dayjs from "dayjs";
import {IAdminListItem} from '@/request/QmsAdminConreiller'
import  router from "../../router"
import {resource} from '../../request/api'
import Rolebianji from './Role-bianji.vue'
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
let route = useRouter()
let add =false //false为编辑 true为添加
let modalForm = ref({}) as Ref<IAdminListItem>
// 编辑弹窗
let visiable = ref(false);
const visiableFn = (e: boolean) => {
  // console.log("e", e);
  visiable.value = e;
};
//获取用户列表数据
const bianji2 = (e:boolean) =>{
  visiable.value = e;
}
let name = ref("");

let { getTableData, tableData, total } = roleTable(api.admin.getRoleList, {
  // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
  keyword: name, // name 是响应式的
  pageSize: pageSize,
  pageNum: currentPage,
});

//添加用户
// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: IAdminListItem) => {
    // 二次 确认 
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求
            if(add){
              // 去判断 是 编辑 还是添加
              await api.admin.adminRegister(row)//新增
            }else{
              await api.admin.adminUpdate(row) // 编辑
            }
            
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}


//进入页面获取数据
getTableData();
// 点击开关按钮,修改状态
let onSwitch= (val:any,val2:any) =>{
  resource.RoleKaiGuan({
      id:val,
      status:(val2-1)*-1
    }).then((res) =>{
      if(res){
        getTableData();
        ElMessage({
        message: '状态修改成功',
        type: 'success',
    })
      }
      // console.log(res);
    })
  }
//页数改变
const handleSizeChange = (val: number) => {
  getTableData();
  // console.log(`${val} items per page`);
};
//数据条数改变
const handleCurrentChange = (val: number) => {
  getTableData();
  // console.log(`current page: ${val}`);
};
let onSearch = async () => {
  // 发送请求,搜索数据
  getTableData();
};

let props = withDefaults(
  defineProps<{
    visiable: boolean;
    title:string
    form: IAdminListItem
  }>(),
  {
    visiable: true,
    title:'add'
  }
);
// 编辑
let onEdit = () => {
  // console.log(111);
  visiable.value=true
  
};
// 分配菜单
let onMenu = (val:any) => {
  // console.log(124);
  router.push({
    path:'/ums/allocMenu',
    params:val
  })
};
// 分配资源
let onResource = (val:any) =>{
  // console.log(123);
  router.push({
    path:'/ums/allocResource',
    params:val
  })
}
let onAddUser = (val: any) => {
  let newUser = {
        email : "",
        nickName : "",
        note : "",
        password : "",
        status : 0,
        username : ""
    } as IAdminListItem;
    modalForm.value = newUser;
    add = true;
  visiable.value = true;
};

</script>

<style lang="scss" scoped>
.breadcrumb-style{
    width: 100%;
    height: 30px;
    background-color: #fff;
    border-bottom: 1px solid #eee
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  flex-wrap: wrap;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  .search_top {
    width: 100%;
  }
  .search_input {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    padding-top: 20px;
    .el-input {
      width: 190px;
      height: 32px;
      font-size: 14px;
      padding: 0 15px;
    }
    p {
      width: 87px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #606266;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
  }
}
.adddata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .ei {
    display: flex;
    align-items: center;
    h3 {
      color: #303133;
      font-size: 14px;
      margin-left: 10px;
    }
  }
  h3 {
    color: #303133;
    font-size: 14px;
    margin-left: 10px;
  }
}
.tables {
  .pagination {
    margin: 20px 0;
    padding-right: 20px;
    float: right;
  }
  .users {
    text-align: center;
    color: #409eff;
    display: inline-block;
    width: 60px;
    font-size: 12px;
    &:hover {
      color: rgba(64, 158, 255, 0.7);
      cursor: pointer;
    }
  }
}
.changes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
</style>
